import 'package:flutter/material.dart';



void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const showCard = true; // Set to false to show Stack

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('card and stack'),
        ),
        body: Center(child: showCard ? _buildStack() : _buildCard()),
      ),
    );
  }
}

/*
  https://flutter.cn/docs/development/ui/layout

  Stack
  可以使用 Stack 在基础 widget（通常是图片）上排列 widget， widget 可以完全或者部分覆盖基础 widget。

  摘要 (Stack)
  用于覆盖另一个 widget

  子列表中的第一个 widget 是基础 widget；后面的子项覆盖在基础 widget 的顶部

  Stack 的内容是无法滚动的

  你可以剪切掉超出渲染框的子项


  在 CircleAvatar 的上面使用 Stack 覆盖 Container （在透明的黑色背景上展示它的 Text）。 Stack 使用 alignment 属性和 Alignment 让文本偏移。


 */

Widget _buildStack() {
  return Stack(
    alignment: const Alignment(0.6, 0.6),
    children: [
      const CircleAvatar(
        backgroundImage: AssetImage('images/card_and_stack/pic.jpg'),
        radius: 100,
      ),
      Container(
        decoration: const BoxDecoration(
          color: Colors.black45,
        ),
        child: const Text(
          'Mia B',
          style: TextStyle(
              fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
        ),
      )
    ],
  );
}

/*

    Card
Material 库 中的 Card 包含相关有价值的信息，几乎可以由任何 widget 组成，但是通常和 ListTile 一起使用。 Card 只有一个子项，这个子项可以是列、行、列表、网格或者其他支持多个子项的 widget。默认情况下，Card 的大小是 0x0 像素。你可以使用 SizedBox 控制 card 的大小。

在 Flutter 中，Card 有轻微的圆角和阴影来使它具有 3D 效果。改变 Card 的 elevation 属性可以控制阴影效果。例如，把 elevation 设置为 24，可以从视觉上更多的把 Card 抬离表面，使阴影变得更加分散。关于支持的 elevation 的值的列表，可以查看 Material guidelines 中的 Elevation。使用不支持的值则会使阴影无效。

摘要 (Card)
实现一个 Material card

用于呈现相关有价值的信息

接收单个子项，但是子项可以是 Row、Column 或者其他可以包含列表子项的 widget

显示圆角和阴影

Card 的内容无法滚动

 */

Widget _buildCard() {
  return SizedBox(
    height: 210,
    child: Card(
      child: Column(
        children: [
          ListTile(
            title: const Text(
              '1625 Main Street',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: const Text('My City, CA 99984'),
            leading: Icon(
              Icons.restaurant_menu,
              color: Colors.blue[500],
            ),
          ),
          const Divider(),
          ListTile(
              title: const Text('(408) 555-1212',
                  style: TextStyle(fontWeight: FontWeight.w500)),
              leading: Icon(
                Icons.contact_phone,
                color: Colors.blue[500],
              )),
          ListTile(
            title: const Text('costa@example.com'),
            leading: Icon(
              Icons.contact_mail,
              color: Colors.blue[500],
            ),
          )
        ],
      ),
    ),
  );
}

/*
  ListTile
ListTile 是 Material 库 中专用的行 widget，它可以很轻松的创建一个包含三行文本以及可选的行前和行尾图标的行。 ListTile 在 Card 或者 ListView 中最常用，但是也可以在别处使用。

摘要 (ListTile)
一个可以包含最多 3 行文本和可选的图标的专用的行

比 Row 更少的配置，更容易使用

来自 Material 库

示例 (ListTile)


 */
